<template>
	<view class="browse-record">
		<z-paging ref="paging" v-model="recordList" @query="getVisitList">
			<view slot="top">
				<u-search shape="round" margin="10px 20px" bgColor="#fff" :showAction="false" placeholder="请输入关键词"
					v-model="keyword" @search="refreshList">
				</u-search>
			</view>
			<view class="roomList">
				<view class="roomItem" v-for="(item, index) in recordList" :key="index" @click="toRoomDetail(item)">
					<image class="roompic" :src="item.images[0] ? item.images[0] :''" mode=""></image>
					<view class="roomtext">
						<p class="rtitle">{{item.name}}</p>
						<span class="rdesc">{{item.floor}}楼 | {{item.area}}㎡ |
							{{item.house_type === 1 ? '单间' : '一房一厅' }}</span>
						<view class="taglist">
							<span v-for="(tag, tindex) in item.taglist" :key="tindex"
								:class="tindex === 0 ? 'first' : ''">{{tag}}</span>
						</view>
						<view class="price">
							<p>¥ <span>{{item.rent}}</span>/月</p>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		getVisitList
	} from '@/api/mine.js'
	export default {
		data() {
			return {
				keyword: '',
				recordList: [],
			}
		},
		methods: {
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.reload();
				}
			},
			async getVisitList(pageNo, pageSize) {
				const res = await getVisitList({
					limit: pageSize,
					page: pageNo,
					keyword: this.keyword
				});
				if (res.response.statusCode === 200) {
					if (res.data.data.data.length != 0) {
						this.$refs.paging.complete(res.data.data.data);
					}
				}
			},
			toRoomDetail(item) {
				uni.navigateTo({
					url: '/pages-house/house-detail/house-detail?id=' + item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.custom-nav-bar {
		height: 50px;
		/* 导航栏高度 */
		display: flex;
		align-items: center;
		color: #000;
		padding: 30px 16px 16px 16px;
	}

	.nav-back {
		flex: 0 0 auto;
		cursor: pointer;

		image {
			width: 12px;
			height: 24px;
			// padding-left: 16px;
		}
	}

	.nav-title {
		flex: 1 1 auto;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 17px;
		color: #000000;
	}

	.roomItem {
		width: 88%;
		padding: 10px;
		background: #fff;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.01);
		border-radius: 12px;
		display: flex;
		margin: 15px auto;

		.roompic {
			width: 110px;
			height: 110px;
			margin-right: 8px;
		}

		.roomtext {
			width: 64%;

			.rtitle {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 13px;
				color: #222222;
				font-weight: bold;
			}

			.rdesc {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 10px;
				color: #999999;
				line-height: 30px;
			}

			.taglist {
				display: flex;
				align-items: center;

				span {
					height: 13px;
					padding: 5px;
					background: #F2F5FB;
					border-radius: 2px;
					display: block;
					font-weight: 400;
					font-size: 10px;
					color: #4F5963;
					margin-right: 10px;
				}

				.first {
					background: #FAF1F2;
					font-weight: 400;
					font-size: 10px;
					color: #FE0404;
				}
			}

			.price {
				margin-top: 20px;

				p {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 10px;
					color: #FE0404;

					span {
						font-size: 14px;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>